<template>
  <div>
    <el-row>
      <span id="title"><b>问诊单管理</b></span>
    </el-row>
    <el-row>
      <div id="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
    </el-row>
    <el-row type="flex"
            align="middle"
            class="shaixuan_2">
      <el-col :span="5">
        <el-input v-model="input"
                  placeholder="输入患者姓名或手机号"></el-input>
      </el-col>
      <el-col :span="2.5"
              :offset="2">
        <font>问诊状态：</font>
      </el-col>
      <el-col :span="5">
        <el-select v-model="value"
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2.5"
              :offset="2">
        <font>问诊方式：</font>
      </el-col>
      <el-col :span="5">
        <el-select v-model="value"
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row type="flex"
            align="middle"
            class="shaixuan_2">
      <el-col :span="2.5">
        <font>问诊来源：</font>
      </el-col>
      <el-col :span="5">
        <el-select v-model="value"
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2.5">
        <font>日期：</font>
      </el-col>
      <el-col :span="8">
        <el-date-picker v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="4"
              :offset="2">
        <el-button type="primary"
                   @click="chose">筛选</el-button>
      </el-col>
    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col>
        <i class="iconfont icon-querylist"></i>
        <span>数据列表</span>
      </el-col>
    </el-row>
    <el-row>
      <el-menu default-active="0"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect"
               style="width:100%">
        <el-menu-item index="0"
                      class="menu">全部</el-menu-item>
        <el-menu-item index="1"
                      class="menu">待支付</el-menu-item>
        <el-menu-item index="2"
                      class="menu">已完成</el-menu-item>
        <el-menu-item index="3"
                      class="menu">已取消</el-menu-item>
      </el-menu>
    </el-row>
    <el-row>
      <el-row>
        <InterogationData :tableData="tableData"
                          style="height:100%"></InterogationData>
      </el-row>
    </el-row>
    <el-row type="flex"
            align="middle">
      <el-col :span="3">
        <input type="checkbox"
               id="checkall">全选
      </el-col>
      <el-col :span="3">
        <el-button type="danger"
                   id="delall"
                   size="mini">批量删除</el-button>
      </el-col>
      <el-col :span="15"
              :offset="3">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page.sync="pageNum"
                       :page-size="pageSize"
                       layout="total, prev, pager, next"
                       :total="total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import InterogationData from './interogationData.vue'
export default {
  components: {
    InterogationData,
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      status: 0,
      tableData: []
    }
  },
  mounted () {
    this.$axios.get("/financial/interoList/findInterosWithStatusByPage?pageNum=1&pageSize=5").then(res => {
      if (res.data.code == 200) {
        this.tableData = res.data.data.data
      }
    })
  },
  methods: {
    handleSelect (key) {

    },
    handleCurrentChange (val) {
      this.$axios.get("/financial/interoList/findInterosWithStatusByPage?pageNum=" + this.pageNum + "&pageSize=5").then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.data
        }
      })
    }
  }
}
</script>
<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */

  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  height: 50px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.menu {
  width: 25%;
  text-align: center;
}
</style>